let list = document.querySelectorAll('.nav li')
let box = document.querySelectorAll('main .box')
for (let i = 0; i < list.length; i++) {
	list[i].onclick = function(evt) {
		for (let j = 0; j < list.length; j++) {
			box[j].style.display = 'none'
			list[j].style.color = '#000'
		}
		list[i].style.color = '#f88484'
		box[i].style.display = 'block';
		evt.stopPropagation() //阻止事件冒泡
		document.onclick = function() {
			box[i].style.display = 'none'
		}
	}
}

let url=`https://www.fastmock.site/mock/0e270c82e5df85f9cc92aed4424fc9ec/xx01/xx`
			 $.ajax({
				 url:url,
				 type:'get',
				 success:function (res) {
			                let obj=res.data.list
							let html=''
							obj.forEach(v=>{
								html+=`
								<dl>
									<dt><img src="${v.image}" alt=""></dt>
									<dd>${v.name}</dd>
									<dd>${v.address}</dd>
									<dd>${v.descript}</dd>
									<span>￥${v.price}</span>
									<span>${v.distance}m</span>
								</dl>
								`
							})
							$('#CTlist').html(html)
			            },
			            error:function (error) {
			                console.log(error);
			            }
			 })